<template>
  <div class="process-box" v-loading="loading">
    <div class="process-top">
      <el-steps
        v-if="state.allNodes && state.allNodes.length > 0"
        :active="activeIndex"
        process-status="process"
        align-center
        finish-status="success"
      >
        <el-step
          v-for="item in state.allNodes"
          :key="item.id"
          :status="item.status"
        >
          <template #title>
            <div>
              {{ renderNodeName(item.nodeName) }}
            </div>
          </template>
          <template #description>
            <div>
              {{ renderNodeDesc(item.nodeName) }}
            </div>
          </template>
        </el-step>
      </el-steps>
      <el-empty
        :image-size="60"
        :image="emptyUrl"
        description="暂无审批数据"
        v-else
      />
    </div>
    <div class="process-bottom">
      <el-timeline>
        <el-timeline-item
          v-for="item2 in state.approvedList"
          :timestamp="item2.approveTime"
          placement="top"
          :hollow="true"
          :color="item2.color"
          :type="item2.type"
          :icon="item2.icon"
          :key="item2.id"
        >
          <h4>{{ item2.processNodeNameFrom }}</h4>
          <div
            class="process-line"
            v-if="item2.approveResult == 1 || item2.approveResult == 4"
          >
            <span>申报单位：{{ item2.orgName }}</span>
            <span>申报人：{{ item2.approveUserName }}</span>
          </div>
          <div v-else class="process-line">
            <span>
              审批结果：{{ formatDictCode('SPJG2', item2.approveResult) }}
            </span>
            <span>经办人：{{ item2.approveUserName }}</span>
            <div class="process-line">
              <span>{{ item2.approveComment }}</span>
            </div>
          </div>

          <div class="process-line" v-if="item2.approveFile">
            <uploadNew
              :key="keyValue"
              v-model:fileIds="item2.approveFile"
              :limit="5"
              disabled
              :file-size="8"
            />
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, markRaw } from 'vue'
import { get_approve_records, get_approve_history } from '@/api/api.js'
import { dictStore } from '@/pinia/modules/dict'
const dictStoreData = dictStore()
const props = defineProps({
  processInstanceId: {
    type: String
  }
})
const emptyUrl = ref(
  new URL(`@/assets/img/common/empty.png`, import.meta.url).href
)
const emit = defineEmits(['close'])
const state = reactive({
  allNodes: [],
  approvedList: []
})
const status = ref('')
const loading = ref(false)
const currentNodeId = ref('')
const activeIndex = ref(0)
const keyValue = ref(new Date().getTime())

const formatDictCode = (code, val) => {
  const target = dictStoreData.dict.find(item => item.code === code)
  if (target && (val || val === 0 || val === '0')) {
    let res = ''
    val
      .toString()
      .split(',')
      .forEach((item, index) => {
        const a = target.children.find(item1 => item1.code == item)
        if (a) {
          res += `${index === 0 ? '' : ','}${a.name}`
        } else {
          res += ''
        }
      })
    return res
  }
  return '-'
}

const formatStatus = val => {
  // 0 未审核，1 审批通过，3 驳回 5撤销
  // '' | 'wait' | 'process' | 'finish' | 'error' | 'success'
  let obj = {
    0: 'wait',
    1: 'success',
    3: 'error',
    5: 'wait'
  }
  for (let i = 0; i < val.length; i++) {
    state.allNodes[i].status = obj[val[i].status]
    if (state.allNodes[i].id == state.approvedList[0].processNodeIdTo) {
      state.allNodes[i].status = 'process'
    }
  }
}

const formatStatus2 = val => {
  for (let i = 0; i < val.length; i++) {
    if (val[i].status == 3) {
      state.approvedList[i].color = 'red'
    } else {
      state.approvedList[i].color = '#67c23a'
    }
  }
}
const getProcessList = async () => {
  loading.value = true
  let res2 = await get_approve_history(props.processInstanceId)
  if (res2.succeed) {
    state.approvedList = res2.data
    formatStatus2(res2.data)
    keyValue.value = Date.now()
  }
  let res1 = await get_approve_records(props.processInstanceId)
  if (res1.succeed) {
    state.allNodes = res1.data
    formatStatus(res1.data)
  }

  loading.value = false
}

const renderNodeName = name => {
  //  截取括号之后的内容换行
  let index = name.indexOf(')')
  return name.substring(0, index + 1)
}
const renderNodeDesc = name => {
  //  截取括号之后的内容换行
  let index = name.indexOf(')')
  return name.substring(index + 1)
}
onBeforeMount(() => {
  getProcessList()
})
</script>
<style lang="scss" scoped>
.process-bottom {
  margin-top: 20px;
}
.process-line {
  margin: 10px 0;
  span {
    margin-right: 30px;
  }
}
// :deep(.el-step__title.is-success) {
//   color: rgb(51, 126, 204)!important;
// }
// :deep(.el-step__head.is-success) {
//   color: rgb(51, 126, 204)!important;
//   border-color: rgb(51, 126, 204)!important;
// }
:deep(.el-timeline-item__tail) {
  border-left: 2px dotted #e4e7ed !important;
}
</style>
